<template>
  <div class="container">
    <!-- 导航条 -->
    <van-nav-bar
      left-arrow
      @click-left="$router.back()"
      title="编辑资料"
    >
    </van-nav-bar>

    <!-- 编辑区 -->
    <van-cell-group>
      <!-- //修改头像 -->
      <input
        type="file"
        @change="hImageChange"
        hidden
        ref='refInput'
      />
      <van-cell
        is-link
        title="头像"
        center
        @click='hInputClick'
      >
        <van-image
          slot="default"
          width="1.5rem"
          height="1.5rem"
          fit="cover"
          round
          :src="photo"
        />
      </van-cell>

      <!-- value： 设置右侧显示的文字 -->
      <van-cell
        is-link
        title="姓名"
        :value="name"
        @click="hEditname"
      />
      <!-- 修改名字的弹出框 -->
      <van-dialog
        v-model="isShowName"
        title="修改名字"
        show-cancel-button
        @confirm="hSaveName"
      >
        <van-field v-model.trim="newName" />
      </van-dialog>

      <van-cell
        is-link
        title="性别"
        :value="gender === 1?'女':'男'"
        @click="isShowGender=true"
      />
      <!-- 修改性别 -->
      <van-popup
        v-model="isShowGender"
        position="bottom"
      >
        <van-nav-bar
          title="修改性别"
          left-text="取消"
          @click-left="showGender=false"
        >
        </van-nav-bar>
        <van-cell
          title="男"
          @click="hSaveGender(0)"
          is-link
        ></van-cell>
        <van-cell
          title="女"
          @click="hSaveGender(1)"
          is-link
        ></van-cell>
      </van-popup>
      <!-- 修改性别 -->
      <van-cell
        is-link
        title="生日"
        :value="birthday"
        @click="isShowBirthday=true"
      />
      <!-- 修改生日 -->
      <van-popup
        v-model="isShowBirthday"
        position="bottom"
      >
        <van-nav-bar title="修改生日">
        </van-nav-bar>
        <van-datetime-picker
          v-model="newDate"
          type="date"
          title="选择年月日"
          @cancel="isShowBirthday=false"
          @confirm="hSaveBirthday"
          :min-date="minDate"
          :max-date="maxDate"
        />
      </van-popup>
      <!-- 修改生日 -->
    </van-cell-group>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { updateUserInfo, updateUserPhoto } from '@/api/user.js'
import { formatDate } from '@/untils/datetime.js'
export default {
  name: 'userProfile',
  data () {
    return {
      // 控制弹层
      isShowName: false,
      isShowGender: false,
      isShowBirthday: false,
      // 修改后的头像
      newPhoto: '',
      // 修改后的新名字
      newName: '',
      // 修改后的性别
      newGender: '',
      // 修改后新生日
      newDate: new Date(),
      minDate: new Date(1965, 0, 10), // dateTime-picker中最小时间
      maxDate: new Date() // 当前时间
    }
  },
  computed: {
    ...mapState('userInfo', ['gender', 'photo', 'name', 'birthday'])
  },
  methods: {
    // 点击触发弹层
    hEditname () {
      this.newName = this.name
      this.isShowName = true
    },
    // 点击修改名字确认触发回调
    async hSaveName () {
      if (!this.newName) return
      try {
        // 发送请求修改名字，同时进行持久化保存
        const res = await updateUserInfo({ name: this.newName })
        console.log(res)
        const newName = res.data.data.name
        this.$store.commit('userInfo/mUpdateUserName', newName)
      } catch (err) {
        console.log(err)
      }
    },
    // 修改性别
    async hSaveGender (gender) {
      // console.log(gender)
      try {
        const res = await updateUserInfo({ gender })
        console.log(res)
        const newGender = res.data.data.gender
        this.$store.commit('userInfo/mUpdateUserGender', newGender)
        this.isShowGender = false
      } catch (err) {
        console.log(err)
      }
    },
    // 修改生日
    async hSaveBirthday () {
      // console.log(this.newDate)
      const birthday = formatDate(this.newDate)
      // console.log(birthday)
      try {
        const res = await updateUserInfo({ birthday })
        console.log(res)
        const newBirthday = res.data.data.birthday
        this.$store.commit('userInfo/mUpdateUserBirthday', newBirthday)
        this.isShowBirthday = false
      } catch (error) {
        console.log(error)
      }
    },
    hInputClick () {
      this.$refs.refInput.click()
    },
    // 修改个人头像
    async hImageChange (e) {
      // console.log(e)
      const file = e.target.files[0]
      console.log(file)
      if (!file) return
      const fd = new FormData()
      fd.append('photo', file)
      try {
        const res = await updateUserPhoto(fd)
        console.log(res)
        const newPhoto = res.data.data.photo
        this.$store.commit('userInfo/mUpdateUserPhoto', newPhoto)
      } catch (error) {
        console.log(error)
      }
    }
  }
}
</script>

<style scoped lang='less'>
/deep/.van-nav-bar .van-icon {
  color: #fff;
}
</style>
